<template>
    <div>
      <basic-container>
        <avue-crud ref="crud"
                   :page.sync="page"
                   :data="buyerList"
                   :table-loading="tableLoading"
                   :option="tableOption"
                   @on-load="getSupplierList"
                   @search-change="searchChange"
                   @refresh-change="refreshChange"
        >
          <template slot="menuLeft">
            <el-button type="primary" icon="el-icon-edit"  size="small" @click="newList">新增</el-button>
          </template>
          <template slot-scope="scope" slot="menu">
            <div>
              <el-button type="text" @click="edit(scope.row)">编辑</el-button>
              <!--<el-button type="text" @click="deleteMerchant(scope.row.id)">删除</el-button> -->
            </div>
          </template>
        </avue-crud>
      </basic-container>
        <el-dialog title="供应商编辑" :visible.sync="dialogFormVisible">
            <edit-temp :form="editValue" :merchantList="merchantList"></edit-temp>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Request from "../request.js";
    import editTemp from "./edit"
    import {getStore, setStore} from "@/util/store";
    import {
      tableOption
    } from '@/const/crud/pds/merchant/supplier'
    let supplierInfo = function () {
        return {
            merchantId: "",
            supplierName: "",
            shortName: "",
            contact: "",
            telephone: "",
            address: "",
            payPeriod: "1",
            tags:"",
            status: "1",
            supplierType: "0",
            needPush: "0",
            sort: "100",
            uid: "",
            remarks: ""
        };
    };

    export default {
        data: function(){
            return {
                page: {
                  total: 0, // 总页数
                  pageNo: 1, // 当前页数
                  pageSize: 20 // 每页显示多少条
                },
                layout:"total, sizes, prev, pager, next, jumper",
                request: new Request(),
                editValue: supplierInfo(),
                dialogFormVisible: false,
                buyerList: [],
                status: '',
                merchantList:[],
                tableOption:tableOption,
                tableLoading:false
            }
        },
        components:{
            editTemp
        },
        watch:{
        },
        created(){
            this.getMerchantList()
        },
        methods:{
            edit(e){
                this.editValue = e;
                this.dialogFormVisible = true
            },
            newList(){
                this.editValue = supplierInfo();
                this.dialogFormVisible = true
            },
            //
            confirm(){
                this.dialogFormVisible = false;
                this.editSupplier()
            },
            /**
             * 刷新回调
             */
            refreshChange(info) {
                this.getSupplierList(this.page, this.filterForm(info.searchForm));
            },
            searchChange(form, done) {
                this.getSupplierList(this.page, form);
                done();
            },
            // 查询供应商列表
            getSupplierList(page,params={}) {
                params.pageSize = page.pageSize;
                params.pageNo = page.currentPage;
                this.tableLoading = true;
                this.request.getSupplierList(params).then(res => {
                    if (res.code == 200) {
                        this.buyerList = res.ext.list;
                        this.page.total = res.ext.count;
                      this.tableLoading = false;
                    }else{
                        this.$message.warning("未查询到供应商列表：" + res.msg)
                      this.tableLoading = false;
                    }
                })
            },
            editSupplier(){
                this.request.editSupplier({...this.editValue}).then( res => {
                    if( res.code === 200){
                        this.$message.success("编辑成功！")
                    }else{
                        this.$message.warning("编辑失败：" + res.msg)
                    }
                    this.getSupplierList()
                })
            },
            deleteSupplier(id){
                this.$confirm("您确认要删除该供应商？").then(_ => {
                    this.request.deleteSupplier({id}).then( res => {
                        if( res.code === 200){
                            this.$message.success("删除成功！")
                            this.getSupplierList()
                        }else{
                            this.$message.warning("删除失败：" + res.msg)
                        }
                    })
                })
            },
            // 查询商家 列表
            getMerchantList() {
                let params = {
                    pageSize: 100,
                    status: 2
                };
                this.request.getMerchantList(params).then(res => {
                    if (res.code === 200) {
                        this.merchantList = res.ext.list;
                        this.merchantList.push({
                            id: getStore({name: "pmId"}),
                            merchantName: getStore({name: "pmName"})
                        });
                        this.total = res.ext.count;
                    }else{
                        this.$message.warning("未查询到采购商列表：" + res.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .top{
        display: flex;
        background-color: white;
        padding: 20px 10px 10px;
        margin-bottom: 20px;
    }
    .top>div{
        margin-left: 50px;
        line-height: 40px;
    }
    .top>div .supplierName{
        margin-left: 10px;
    }
    .page-box{
        background-color: white;
        display: flex;
        justify-content: space-between;
    }
</style>
